<template>
  <div>
    <button @click="comName = 'QrCode'">二维码登录</button>
    <button @click="comName = 'UserLogin'">账号密码登录</button>
    <button @click="comName = 'PhoneLogin'">手机验证码登录</button>

    <!-- <qr-code v-if="comName == 'QrCode'"/>
    <user-login v-else-if="comName == 'UserLogin'"/>
    <phone-login v-else-if="comName == 'PhoneLogin'"/> -->

    <!-- 动态组件 -->
    <!-- 这个区域的组件没有写死，而是根据comName这个变量决定 -->
    <!-- 这个变量的值是哪个组件的名字，就会显示哪个组件 -->
    <keep-alive>
      <component :is="comName" />
    </keep-alive>
  </div>
</template>

<script>
import QrCode from './components/QrCode.vue'
import UserLogin from './components/UserLogin.vue'
import PhoneLogin from './components/PhoneLogin.vue'
export default {
  components: {
    QrCode,
    UserLogin,
    PhoneLogin
  },
  data () {
    return {
      comName: 'QrCode'
    }
  }
}
</script>

<style></style>
